<style scoped>
.el-pagination {
    margin-top: 20px;
    text-align: center;
}
</style>

<template>
    <el-form @submit.native.prevent :inline="true" :model="authorityListQuery" ref="queryForm" class="demo-form-inline">
        <el-form-item label="权限id" prop="authorityId">
            <el-input v-model="authorityListQuery.authorityId" placeholder="权限id" />
        </el-form-item>
        <el-form-item label="权限Key" prop="authorityKey">
            <el-input v-model="authorityListQuery.authorityKey" placeholder="权限Key" />
        </el-form-item>
        <el-form-item label="权限名" prop="authorityName">
            <el-input v-model="authorityListQuery.authorityName" placeholder="权限名" />
        </el-form-item>
        <el-form-item label="状态" prop="disabled">
            <el-select v-model="authorityListQuery.disabled" placeholder="状态">
                <el-option label="禁用" :value="true" />
                <el-option label="启用" :value="false" />
            </el-select>
        </el-form-item>
        <el-row>
            <el-form-item>
                <el-button :disabled="tableLoading" type="primary" @click="showCreateDialog">新增</el-button>
                <el-button :disabled="tableLoading" type="primary" native-type="submit"
                    @click="submitQueryList(queryForm)">查询</el-button>
                <el-button :disabled="tableLoading" @click="resetForm(queryForm)">重置</el-button>
            </el-form-item>
        </el-row>

    </el-form>

    <el-table v-loading="tableLoading" :data="authorityList" style="width: 100%" border>
        <el-table-column prop="authorityId" label="权限id" align="center" />
        <el-table-column prop="authorityKey" label="权限key" align="center" />
        <el-table-column prop="authorityName" label="权限名" align="center" />
        <el-table-column prop="remark" label="备注" align="center" />
        <el-table-column prop="disabled" label="状态" align="center">
            <template #default="scope">
                <el-tag :type="scope.row.disabled ? 'danger' : 'success'" disable-transitions>{{ scope.row.disabled ? '禁用' :
                    '启用' }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="showDetailDialog(scope.row)">查看</el-button>
                <el-button link type="primary" size="small" @click="showUpdateDialog(scope.row)">编辑</el-button>
                <el-button link :type="scope.row.disabled ? 'success' : 'danger'" size="small"
                    @click="handleUpdateDisabled(scope.row)">{{ scope.row.disabled ? '启用' : '禁用' }}
                </el-button>
                <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination :page-count="pageInfo.pageCount" :page-size="pageInfo.pageSize" :current-page="pageInfo.currentPage"
        :total="pageInfo.pageTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" background
        layout="total,sizes,prev,pager,next,jumper,->"></el-pagination>



    <el-dialog v-model="detailFormVisible" :title="detailFormTitle" width="300px" center>
        <el-form :model="currentEntity">
            <el-form-item label="权限id" prop="authorityId" label-width="100px" disabled>
                <el-input v-model="currentEntity.authorityId" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="权限Key" prop="authorityKey" label-width="100px">
                <el-input v-model="currentEntity.authorityKey" autocomplete="off" />
            </el-form-item>
            <el-form-item label="权限名字" prop="authorityName" label-width="100px">
                <el-input v-model="currentEntity.authorityName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" prop="remark" label-width="100px">
                <el-input v-model="currentEntity.remark" autocomplete="off" />
            </el-form-item>
            <el-form-item label="状态" prop="disabled" label-width="100px">
                <el-select v-model="currentEntity.disabled">
                    <el-option label="禁用" :value="true" />
                    <el-option label="启用" :value="false" />
                </el-select>
            </el-form-item>

        </el-form>
        <template #footer v-if="PageState.DETAIL != currentPageState">
            <span class="dialog-footer">
                <el-button @click="detailFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleUpdateOrCreate">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script setup lang="ts">
import { Authority } from '@/domain/entity/Authority';
import { AuthorityListQuery } from '@/domain/query/AuthorityListQuery';
import { PageInfo } from "@/domain/entity/PageInfo";
import { reactive, ref, watch } from 'vue';
import * as authorityApi from '@/api/AuthorityApi';
import { PageState } from '@/domain/enums/PageState';
import { Action, ElMessage, ElMessageBox, FormInstance } from 'element-plus';


// 表格是否在加载
const tableLoading = ref(false);
// 查询表单对象
const queryForm = ref<FormInstance>();
// 当前页面分页信息
const pageInfo: PageInfo = reactive<PageInfo>(new PageInfo())
// 权限列表
const authorityList: Array<Authority> = reactive<Array<Authority>>(new Array<Authority>());
// 列表查询对象
const authorityListQuery: AuthorityListQuery = reactive<AuthorityListQuery>(new AuthorityListQuery());
// 详情表单标题
const detailFormTitle = ref<string>("详情");
// 详情表单是否展示
const detailFormVisible = ref(false);
// 当前对象信息
const currentEntity: Authority = reactive<Authority>(new Authority());
// 当前页面状态
const currentPageState = ref<PageState>(PageState.DETAIL);


// 侦听页面大小改变,触发table刷新
watch(() => pageInfo.pageSize, (val) => {
    authorityListQuery.size = val;
    updateTable()
})
// 侦听当前页码改变,触发table刷新
watch(() => pageInfo.currentPage, (val) => {
    authorityListQuery.current = val;
    updateTable()
})


// 分页插件处理事件
const handleSizeChange = (val: number) => {
    pageInfo.pageSize = val;
}
const handleCurrentChange = (val: number) => {
    pageInfo.currentPage = val
}

/**
* 更新权限列表展示
*/
const updateTable = () => {
    tableLoading.value = true;
    authorityApi.getListPage(authorityListQuery).then(response => {
        let list: Array<Authority> = response.data.data!.records;
        authorityList.length = 0;
        authorityList.push(...list);
        pageInfo.pageCount = response.data.data?.pages!;
        pageInfo.pageSize = response.data.data?.size!;
        pageInfo.pageTotal = response.data.data?.total!;
        pageInfo.currentPage = response.data.data?.current!;
    }).finally(() => {
        tableLoading.value = false;
    });
}

// 加载完毕之后,更新列表
updateTable();


/**
 * 提交查询表单
 * @param queryFormInstance 查询表单对象
 */
const submitQueryList = (queryFormInstance: FormInstance | undefined) => {
    if (!queryFormInstance) return;
    updateTable();
}

/**
 * 重置查询表单
 * @param queryFormInstance 查询表单对象
 */
const resetForm = (queryFormInstance: FormInstance | undefined) => {
    if (!queryFormInstance) return;
    queryFormInstance.resetFields()
}


/**
 * 处理更新或者创建
 */
const handleUpdateOrCreate = () => {

    switch (currentPageState.value) {
        case PageState.CREATE:
            authorityApi.create(currentEntity).then(response => {
                let responseRole = response.data.data;
                Object.assign(currentEntity, new Authority());
                Object.assign(currentEntity, responseRole);
                updateTable();
                detailFormVisible.value = false;
            });
            break;
        case PageState.UPDATE:
            authorityApi.update(currentEntity).then(response => {
                let responseRole = response.data.data;
                Object.assign(currentEntity, new Authority());
                Object.assign(currentEntity, responseRole);
                updateTable();
                detailFormVisible.value = false;
            });
            break;
        default:
            break;
    }

}

/**
 * 展示详情对话框
 * @param row 行数据
 */
const showDetailDialog = (row: Authority) => {
    currentPageState.value = PageState.DETAIL
    detailFormTitle.value = "详情";
    Object.assign(currentEntity, new Authority());
    Object.assign(currentEntity, row);
    detailFormVisible.value = true;
    authorityApi.getDetail(currentEntity.authorityId!).then(response => {
        Object.assign(currentEntity, response.data.data);
    });

}

/**
 * 展示更新对话框
 * @param row 行数据
 */
const showUpdateDialog = (row: Authority) => {

    currentPageState.value = PageState.UPDATE;
    detailFormTitle.value = "更新";
    Object.assign(currentEntity, new Authority());
    Object.assign(currentEntity, row);
    detailFormVisible.value = true;
    authorityApi.getDetail(currentEntity.authorityId!).then(response => {
        Object.assign(currentEntity, response.data.data);
    });
}

/**
 * 展示新增
 */
const showCreateDialog = () => {
    currentPageState.value = PageState.CREATE;
    detailFormTitle.value = "新增";
    Object.assign(currentEntity, new Authority());
    currentEntity.disabled = false;
    detailFormVisible.value = true;
}


/**
 * 展示禁用对话框
 * @param row 行数据
 */
const handleUpdateDisabled = (row: Authority) => {
    Object.assign(currentEntity, new Authority());
    Object.assign(currentEntity, row);

    ElMessageBox({
        title: '切换禁用状态',
        message: `切换禁用状态: ${currentEntity.authorityName}(${currentEntity.authorityId}) ?`,
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: (action: Action) => {
            if (action === 'confirm') {
                authorityApi.updateDisabled(currentEntity.authorityId!).then(response => {

                    if (response.data.code === 0) {
                        ElMessage.success('更新成功')
                        updateTable();
                    } else {
                        ElMessage.warning('更新失败')
                    }
                });
            }
        }
    });


}

// /**
//  * 展示更新显示对话框
//  * @param row 行数据
//  */
// const handleUpdateShowState = (row: Authority) => {
//     Object.assign(currentEntity, new Authority());
//     Object.assign(currentEntity, row);

//     ElMessageBox({
//         title: '切换显示状态',
//         message: `切换显示状态: ${currentEntity.authorityName}(${currentEntity.authorityId}) ?`,
//         type: 'warning',
//         showCancelButton: true,
//         confirmButtonText: '确定',
//         cancelButtonText: '取消',
//         callback: (action: Action) => {
//             if (action === 'confirm') {
//                 authorityApi.updateShowStatus(currentEntity.authorityId!).then(response => {

//                     if (response.data.code === 0) {
//                         ElMessage.success('更新成功')
//                         updateTable();
//                     } else {
//                         ElMessage.warning('更新失败')
//                     }
//                 });
//             }
//         }
//     });
// }


/**
 * 展示删除对话框
 * @param row 行数据
 */
const handleDelete = (row: Authority) => {
    Object.assign(currentEntity, new Authority());
    Object.assign(currentEntity, row);
    ElMessageBox({
        title: '确定删除',
        message: `确定删除: ${currentEntity.authorityName}(${currentEntity.authorityId}) ?`,
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: (action: Action) => {
            if (action === 'confirm') {
                authorityApi.remove(currentEntity.authorityId!).then(response => {

                    if (response.data.code === 0) {
                        ElMessage.success('删除成功')
                        updateTable();
                    } else {
                        ElMessage.warning('删除失败')
                    }

                });
            }
        }
    });
}

</script>

